<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影界面</title>
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/css/register.css">
    <link rel="stylesheet" href="/css/page.css">
    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/vendor/icofont/icofont.min.css" rel="stylesheet">
    <link href="/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="/vendor/venobox/venobox.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/styles.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="header-container">
            <div class="logo">
                <h1>MovieSite</h1>
            </div>
            <div class="auth-buttons">
                <button id="login-btn">登录</button>
                <button id="register-btn">注册</button>
                <div id="user-profile" style="display: none;">
                    <img id="user-avatar" src="#" alt="User Avatar">
                    <span id="user-name"></span>
                    <span id="user-membership"></span>
                    <button id="logout-btn" style="display: none;">退出</button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <main>
        <div class="container">
            <!-- 左侧导航栏 -->
            <nav class="sidebar">
                <ul>
                    <li><a href="#entry">主&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
                    <li><a href="#movies">影片展示</a></li>
                    <li><a href="#rankings">电影排行</a></li>
                    <li><a href="#creators">主创作品</a></li>
                    <li><a href="#more">更多信息</a></li>
                </ul>
            </nav>
                <!-- 右侧内容展示区 -->
                <section class="content">
                    <div id="entry" class="content-section">
                        <div>
                            <h2>主&nbsp;&nbsp;&nbsp;&nbsp;页</h2>

                            <!-- ======= About Us Section ======= -->
                            <section id="about" class="about">
                                <div class="container1">
                                    <div class="row no-gutters">
                                        <div class="col-lg-6">
                                            <img src="/img/about.png" class="img-fluid" style="margin-top:100px;" >
                                        </div>
                                        <div class="col-lg-6 d-flex flex-column justify-content-center about-content">
                                            <div class="section-title">
                                                <h2>关于电影</h2>
                                                <p>一个正在悄然崛起的新领域，一个人民大众喜闻乐见的文化艺术形式，文化产业中颇具活力与生命力的重要组成部分。</p>
                                            </div>
                                            <div class="icon-box">
                                                <div class="icon"><i class="bx bx-fingerprint"></i></div>
                                                <h4 class="title"><a href="https://baike.baidu.com/item/%E7%A8%8B%E6%AD%A6/62324706?fromModule=lemma_sense-layer#viewPageContent">猫眼电影主控人 程武</a></h4>
                                                <p class="description">内容上更有共鸣、共情的本土化故事会成为市场的核心，产业上更赋能内容破圈的公司成为市场的主导。而技术革命、全球市场、人才体系垂直培养都会成为这“下一阶段”里的核心命题。</p>
                                            </div>
                                            <div class="icon-box">
                                                <div class="icon"><i class="bx bx-gift"></i></div>
                                                <h4 class="title"><a href="https://baike.baidu.com/item/%E4%BA%8E%E5%86%AC/70329?fromModule=lemma_search-box">博纳影业董事长 于冬</a></h4>
                                                <p class="description">探索多样化、多类型、多品种的供给侧改革，构建可持续发展的电影产业环境。接下来，深耕主流题材夯实基石，结合新的现代电影理念和新的现代电影技术手段的尝试，运用好虚拟现实、云计算、大数据、人工智能等新技术手段，延续新主流电影创作成果，继续赋予新主流大片新的表达，创作出更多思想精深、艺术精湛、制作精良的好作品，努力创造属于我们这个时代的新文化，打造属于我们这个时代的新主流大片。</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>

                            <!-- ======= Services Section ======= -->
                            <section id="services" class="services">
                                <div class="container1">
                                    <div class="section-title">
                                        <h2>电影的演变历史</h2>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-4 col-md-6 icon-box">
                                            <div class="icon"><i class="icofont-computer"></i></div>
                                            <h4 class="title">早期实验阶段（1880年代-1910年代）</h4>
                                            <p class="description">在19世纪末至20世纪初，电影还处于实验性阶段。短片和纪录片风行，电影的技术和语言还在不断探索和发展中。早期的电影由默片、黑白画面和简单的特效组成，如《蒙太奇的旅程》(A Trip to the Moon)等。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 icon-box">
                                            <div class="icon"><i class="icofont-chart-bar-graph"></i></div>
                                            <h4 class="title">默片时代（1920年代-1920年代中期）</h4>
                                            <p class="description">默片时代是电影史上一个重要的阶段。电影开始具备更为复杂的叙事结构和艺术表现力。大师级导演如查理·卓别林和巴斯特·基顿等崭露头角。音乐在电影中也扮演重要角色，而黑白电影的视觉效果愈发成熟。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 icon-box">
                                            <div class="icon"><i class="icofont-earth"></i></div>
                                            <h4 class="title">彩色与有声电影时代(1930年代-1950年代)</h4>
                                            <p class="description">20世纪30年代，有声电影和彩色电影的技术问世，为电影带来了巨大的改变。这个时期出现了一系列经典电影，包括《乱世佳人》(Gone with the Wind)和《绿野仙踪》(The Wizard of Oz)等。电影开始成为全球流行文化的一部分。</p>
                                        </div>
                                        <!--                                        data-aos="fade-up" data-aos-delay="300"-->
                                        <div class="col-lg-4 col-md-6 icon-box">
                                            <div class="icon"><i class="icofont-image"></i></div>
                                            <h4 class="title">新浪潮与国际化（1960年代-1970年代）</h4>
                                            <p class="description">这一时期，许多国家的电影产业开始繁荣起来。法国新浪潮运动、意大利新现实主义、日本新浪潮等涌现出一批伟大的导演和作品。同时，好莱坞继续发展，并涌现出新的电影类型，如新好莱坞运动和黑波带 (Blaxploitation) 等。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 icon-box">
                                            <div class="icon"><i class="icofont-settings"></i></div>
                                            <h4 class="title">数字时代和特效革命(1980年代-2000年代)</h4>
                                            <p class="description">随着计算机技术的进步，数字特效在电影中得到广泛应用。这一时期出现了许多具有里程碑意义的电影，如《星球大战》(Star Wars) 系列、《阿凡达》(Avatar) 和《魔戒》(The Lord of the Rings) 系列。同时，独立电影也在这个时期蓬勃发展。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 icon-box">
                                            <div class="icon"><i class="icofont-tasks-alt"></i></div>
                                            <h4 class="title">当代电影（2010年代-至今）</h4>
                                            <p class="description">当代电影涵盖了广泛的题材和类型。在这个时期，超级英雄电影成为主流，并且动作、科幻、恐怖等类型电影都得到广泛关注。在线流媒体平台的兴起也改变了电影的传播方式，让更多人能够观看到来自世界各地的电影作品。</p>
                                        </div>
                                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请注意，这只是一个简化的分类，并不能完全穷尽电影历史上的所有重要事件和阶段。电影历史非常复杂，每个时期都有<p>
                                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其独特的贡献和价值。</p>
                                    </div>

                                </div>
                            </section><!-- End Services Section -->

                            <!-- ======= About Lists Section ======= -->
                            <section class="about-lists">
                                <div class="container1">
                                    <div class="row no-gutters">
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>01</span>
                                            <h4>《阿甘正传》</h4>
                                            <p>生命就像一盒巧克力，你永远不知道下一块是什么味道的。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>02</span>
                                            <h4>《西雅图不眠夜》</h4>
                                            <p>你没天都在做看起来毫无意义的决定，但某一天你的某个决定就能改变你的一生。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>03</span>
                                            <h4>《三傻大闹宝莱坞》</h4>
                                            <p>有位智者说，学习是为了完善人生，而非享乐人生，追求卓越，成功自会随你而来。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>04</span>
                                            <h4>《狮子王》</h4>
                                            <p>我只是在必要的时候才会勇敢，勇敢并不代表你要到处闯祸。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>05</span>
                                            <h4>《放牛班的春天》</h4>
                                            <p>永不放弃，总有希望在前面等待。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>06</span>
                                            <h4>《哈利·波特与密室》</h4>
                                            <p>让我们成为什么样人的，并不是我们的能力，而是我们的选择。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>07</span>
                                            <h4>《当幸福来敲门》</h4>
                                            <p>你有梦想，你就要守护它。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>08</span>
                                            <h4>《肖申克的救赎》</h4>
                                            <p>恐惧让你沦为囚犯，希望让你重获自由。</p>
                                        </div>
                                        <div class="col-lg-4 col-md-6 content-item">
                                            <span>09</span>
                                            <h4>《荒野生存》</h4>
                                            <p>有些人会问，为什么现在行动？为什么不等等呢？答案很明了，这个世界不会等你。</p>
                                        </div>
                                    </div>
                                </div>
                            </section><!-- End About Lists Section -->

                            <!-- ======= Our Team Section ======= -->
                            <section id="team" class="team">
                                <div class="container1">
                                    <div class="section-title">
                                        <h2>我们的团队</h2>
                                        <p>一站式电影互联网平台，基于Spring Boot + MyBatis plus + Redis开发的电影网站，为电影从业者和电影爱好者提供一定的参考和借鉴。</p>
                                    </div>
                                </div>
                            </section><!-- End Our Team Section -->

                            <!-- ======= Frequently Asked Questions Section ======= -->
                            <section id="faq" class="faq section-bg">
                                <div class="container1">
                                    <div class="section-title">
                                        <h2>常见问题</h2>
                                    </div>
                                    <div class="row  d-flex align-items-stretch">
                                        <div class="col-lg-6 faq-item">
                                            <h4>什么是豆瓣评分？</h4>
                                            <p>
                                                豆瓣评分是中国知名的电影评价平台豆瓣上用户对电影进行评分的指标。评分范围从1到10分，数值越高表示用户对电影的评价越好。
                                            </p>
                                        </div>
                                        <div class="col-lg-6 faq-item">
                                            <h4>哪些电影值得一看？</h4>
                                            <p>
                                                值得一看的电影通常是指在影评人或观众中获得高度好评的电影。这些电影可能是优秀的剧情片、动作片、科幻片、喜剧片等，能够在情感和思想上触动观众，给人留下深刻印象。在本网站中，我们将定期推荐一些值得观看的电影，并提供详细的影评和观影指南。
                                            </p>
                                        </div>
                                        <div class="col-lg-6 faq-item">
                                            <h4>如何评价一部电影的质量？</h4>
                                            <p>
                                                电影的质量是主观的，每个人都有不同的喜好和评价标准。观众可以从影片的故事情节、表演、导演技巧、摄影、音乐等方面进行评价。同时，豆瓣、IMDb等电影评价网站上的用户评分和评论也可以作为参考依据。电影是一种具有文化背景的艺术形式，不同地区的观众可能会对电影中的文化元素产生不同的理解和感受。电影制作者需要考虑到文化差异对观众理解的影响，选择适当的表现方式和故事情节，以便能够更好地传达电影的意图和情感。
                                            </p>
                                        </div>
                                        <div class="col-lg-6 faq-item">
                                            <h4>什么样的电影会更受欢迎？</h4>
                                            <p>
                                                电影的受欢迎程度可以从多个方面衡量，包括票房收入、豆瓣评分、IMDb评分等。通常，好莱坞大片、超级英雄电影以及具有口碑效应的影片在全球范围内都受到观众的热爱。豆瓣作为一个电影评分和评论平台，对观众的电影选择起着重要的指导作用。高分电影和积极的评论能够吸引观众的关注，增加观影的意愿。同时，观众也会参考豆瓣的评分和评论来了解其他观众的看法，帮助自己做出更好的电影选择。
                                            </p>
                                        </div>
                                        <div class="col-lg-6 faq-item">
                                            <h4>如何了解电影产业的最新动态和幕后故事？</h4>
                                            <p>
                                                了解电影产业的最新动态和幕后故事，可以通过关注电影新闻、专业影评人的评论，以及导演、演员和制片人的采访。在本网站中，我们将提供电影行业的最新资讯、幕后花絮和专访报道，帮助读者深入了解电影产业的动态和背后的故事。
                                            </p>
                                        </div>
                                        <div class="col-lg-6 faq-item">
                                            <h4>电影如何影响人们的情感和思想？</h4>
                                            <p>
                                                电影作为一种强大的艺术形式，能够深刻地触动人们的情感和思想。优秀的电影通过引人入胜的故事情节、逼真的演技以及感人的表现，让观众在情感上共鸣，感受到喜怒哀乐。同时，电影也是表达导演和编剧对现实生活、人性和社会问题的思考和探索的重要媒介。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </section><!-- End Frequently Asked Questions Section -->

                            <!-- ======= Contact Us Section ======= -->
                            <section id="contact" class="contact">
                                <div class="container1">
                                    <div class="section-title">
                                        <h2>联系我们</h2>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6 d-flex align-items-stretch">
                                            <div class="info-box">
                                                <i class="bx bx-map"></i>
                                                <h3>地址</h3>
                                                <p>广东省，广州市，花城大道</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 d-flex align-items-stretch">
                                            <div class="info-box">
                                                <i class="bx bx-envelope"></i>
                                                <h3>邮件</h3>
                                                <p>info@film.com<br>contact@film.com</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 d-flex align-items-stretch">
                                            <div class="info-box ">
                                                <i class="bx bx-phone-call"></i>
                                                <h3>电话</h3>
                                                <p>+1 5589 55488 55<br>+1 6678 25445 41</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <form action="forms/contact.php" method="post" role="form" class="php-email-form">
                                                <div class="form-row">
                                                    <div class="col-lg-6 form-group">
                                                        <input type="text" name="name" class="form-control" id="name" placeholder="姓名" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                                                        <div class="validate"></div>
                                                    </div>
                                                    <div class="col-lg-6 form-group">
                                                        <input type="email" class="form-control" name="email" id="email" placeholder="邮箱" data-rule="email" data-msg="Please enter a valid email" />
                                                        <div class="validate"></div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text" class="form-control" name="subject" id="subject" placeholder="主题" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                                                    <div class="validate"></div>
                                                </div>
                                                <div class="form-group">
                                                    <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="请填写内容" placeholder="Message"></textarea>
                                                    <div class="validate"></div>
                                                </div>
                                                <div class="mb-3">
                                                    <div class="loading">Loading</div>
                                                    <div class="error-message"></div>
                                                    <div class="sent-message">您的意见已经发送，谢谢！</div>
                                                </div>
                                                <div class="text-center"><button type="submit">发送给我们</button></div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </section><!-- End Contact Us Section -->

                        </div>
                    </div>
                    <div id="movies" class="content-section">
                        <div id="filter-section">
                            <h2>影片展示</h2>
                            <h3>类型</h3>
                            <div class="filter-options">
                                <label><input type="radio" name="type" value="" checked> 全部</label>
                                <label><input type="radio" name="type" value="喜剧"> 喜剧</label>
                                <label><input type="radio" name="type" value="动作"> 动作</label>
                                <label><input type="radio" name="type" value="爱情"> 爱情</label>
                                <label><input type="radio" name="type" value="科幻"> 科幻</label>
                                <label><input type="radio" name="type" value="冒险"> 冒险</label>
                                <label><input type="radio" name="type" value="灾难"> 灾难</label>
                                <label><input type="radio" name="type" value="剧情"> 剧情</label>
                                <label><input type="radio" name="type" value="动画"> 动画</label>
                                <label><input type="radio" name="type" value="奇幻"> 奇幻</label>
                                <label><input type="radio" name="type" value="悬疑"> 悬疑</label>
                                <label><input type="radio" name="type" value="犯罪"> 犯罪</label>
                                <label><input type="radio" name="type" value="传记"> 传记</label>
                            </div>
                            <h3>地区</h3>
                            <div class="filter-options">
                                <label><input type="radio" name="region" value="" checked> 全部</label>
                                <label><input type="radio" name="region" value="中国大陆"> 中国大陆</label>
                                <label><input type="radio" name="region" value="中国香港"> 中国香港</label>
                                <label><input type="radio" name="region" value="日本"> 日本</label>
                                <label><input type="radio" name="region" value="美国"> 美国</label>
                                <label><input type="radio" name="region" value="英国"> 英国</label>
                                <label><input type="radio" name="region" value="法国"> 法国</label>
                                <label><input type="radio" name="region" value="西班牙"> 西班牙</label>
                            </div>
                            <!-- 分页控件 -->
                            <div class="pagination-controls">
                                <label for="page-number">页码:</label>
                                <input type="number" id="page-number" min="1" value="1">
                                <label for="page-size">每页条数:</label>
                                <input type="number" id="page-size" min="1" value="12">
                                <button id="apply-filters">筛选</button>
                            </div>
                        </div>
                        <div id="movie-list" class="movie-list">
                            <!-- 影片数据将通过AJAX请求后填充到这里 -->
                        </div>
                        <div id="pagination"></div>
                    </div>
                    <div id="rankings" class="content-section">
                        <h2>电影排行</h2>
                        <div class="rankings-filter">
                            <button id="weekly" class="rank-button">本周排行</button>
                            <button id="monthly" class="rank-button">本月排行</button>
                            <button id="likes" class="rank-button">人气排行</button>
                            <button id="hot" class="rank-button">好评排行</button>
                            <button id="total" class="rank-button">全部排行</button>
                        </div>
                        <div id="rankings-list" class="rankings-list">
                            <!-- 排行榜数据将通过AJAX请求后填充到这里 -->
                        </div>
                    </div>
                    <div id="creators" class="content-section">
                        <h2>主创作品</h2>
                        <!-- 在主创作品模块中添加搜索输入框和按钮 -->
                        <div id="search-creator-section">
                            <input type="text" id="creator-search-input" placeholder="输入演员或导演名字">
                            <button id="search-creator-btn">搜索</button>
                        </div>
                        <!-- 在主创作品模块中添加显示搜索结果的区域 -->
                        <div id="creator-movie-list" class="creator-movie-list">
                            <!-- 影片数据将通过AJAX请求后填充到这里 -->
                        </div>
                    </div>
                    <div id="more" class="content-section">
                        <h2>更多信息</h2>
                        <div class="more-filter">
                            <button class="chart-btn">图表展示</button>
                            <button class="report-btn">下载报表</button>
                        </div>
                    </div>
                </section>
        </div>
    </main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/js/script.js"></script>
    <script src="/js/page.js"></script>
    <script src="/js/search.js"></script>
    <script src="/js/rank.js"></script>
    <script src="/js/chart.js"></script>
    <script src="/js/pay.js"></script>
    <script src="/js/main.js"></script>
    <script>AOS.init();</script>
</body>
</html>